<template>
	<view class="details">
		<u-navbar back-icon-color="#FFFFFF" :back-text-style="backText" title-color="#FFFFFF" :background="barbg" back-text="返回"
		 title="点位详情">
			<view class="navbar-right" slot="right" @tap="editSite()">编辑</view>
		</u-navbar>
		<view class="map">
			<map style="width: 750rpx; height: 700rpx;" id="navmap" :latitude="latitude" :longitude="longitude" :markers="markers"
			 :circles="circles"></map>
		</view>
		<view class="textmain">
			<u-row :gutter="0">
				<u-col :span="4">有效半径</u-col>
				<u-col :span="7">
					<input type="text" v-model="form.scope" class="input" :disabled="isEdit"></input>
				</u-col>
				<u-col :span="1" style="font-size: 35rpx;">m</u-col>
			</u-row>
			<u-row :gutter="0">
				<u-col :span="4">点位名称</u-col>
				<u-col :span="8" v-if="isEdit" style="text-align: right;">{{siteData[id]}}</u-col>
				<u-col :span="8" v-if="isEdit === false" style="text-align: right;">
					<input type="text" v-model="form.name" class="input" placeholder="请输入点位名称" :disabled="isEdit"></input>
				</u-col>
			</u-row>
			<u-row :gutter="0">
				<u-col :span="4">点位类型</u-col>
				<u-col :span="8" @tap="selectShowSwitch" style="text-align: right;">
					<!-- <input v-model="siteType" style="text-align: right;"  type="text" placeholder="请选择点位类型" @tap="selectShowSwitch" :disabled="isEdit" readonly ></input> -->
					{{!siteTypeOne ? siteType:siteTypeOne}}
				</u-col>
			</u-row>
			<view class="btns">
				<u-button type="error" @tap="deleteSite">删除</u-button>
			</view>
		</view>
		<u-select mode="single-column" :list="selectList" v-model="selectShow" @confirm="selectConfirm"></u-select>
	</view>
</template>

<script>
	import {
		siteInfo,
		putEditSite,
		deleteDeleteSite,
		getSite
	} from "@/api/site.js"
	import { queryParams , checkOpenGPSServiceByAndroid , gcjToGps , gpsToGcj } from "@/common/index.js"
	export default {
		data() {
			return {
				id: null,
				datalist: {},
				isEdit: true,
				selectShow: false,
				sitename: "",
				barbg: {
					background: '#5c92ff'
				},
				backText: {
					color: '#FFFFFF'
				},
				selectList: [{
						value: '1',
						label: '作业点'
					},
					{
						value: '2',
						label: '卸土点'
					},
				],
				prevPage: null,
				queryType: true,
				// 地图
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				circles: [], //圆
				markers: [],
				form: {},
				siteData: {},
				site: '',
				siteTypeOne: null,
				parameters: {
					key: "01849cc031d462fa1bb5c22f39c51c4d",
					location: "",
					output: "JSON"
				}

			}
		},
		computed: {
			siteType() {
				if (this.form.type === '1') {
					return "作业点"
				}
				if (this.form.type === '2') {
					return "卸土点"
				}
			}
		},
		onLoad(option) {
			// console.log(option)
			this.id = option.id
			this.getSiteInfo(this.id)
		},
		
		onShow() {
			checkOpenGPSServiceByAndroid()
			// var pages = getCurrentPages();
			// this.prevPage = pages[pages.length - 1];
			// if (this.prevPage.delete === true){
			// 	this.getSiteInfo(this.id)
			// }
			if (this.queryType) {
				this.getSiteData()
			}

		},
		onReady() {
			var nmap = uni.createMapContext("navmap", this).$getAppMap();
			nmap.onclick = (res) => {
				if (this.isEdit === false) {
					this.markers = [{
						id: 1,
						latitude: res.latitude,
						longitude: res.longitude,
						iconPath: '/static/positionRed.png',
					}];
					this.circles = [{ //在地图上显示圆
						latitude: res.latitude,
						longitude: res.longitude,
						fillColor: "#fillColor", //填充颜色
						color: "#A7B6CB", //描边的颜色
						radius: this.valuedata, //半径
						strokeWidth: 2 //描边的宽度
					}];
					this.latitude = res.latitude
					this.longitude = res.longitude
					this.form.latitude = res.latitude
					this.form.longitude = res.longitude
					// this.getMap()
				}
			}
		},
		methods: {
			selectConfirm(e) {
				this.form.type = '';
				e.map((val, index) => {
					this.siteTypeOne = val.label
					this.form.type = val.value
				});
			},
			selectShowSwitch() {
				if (this.isEdit !== true) {
					this.selectShow = true
				}
			},
			getMap() {
				let mapUrl = "https://restapi.amap.com/v3/geocode/regeo"
				this.parameters.location = this.longitude + ',' + this.latitude
				console.log(this.parameters)
				mapUrl = mapUrl + queryParams(this.parameters, '?')
				uni.request({
					url: mapUrl,
					method: "GET",
					dataType: 'json',
					success: res => {
						console.log(res.data.regeocode.addressComponent)
						if (res.statusCode !== 200) {
							uni.showToast({
								title: "定位失败",
								icon: "none"
							})
							return
						}
						this.sitename = res.data.regeocode.formatted_address
					}
				})
			},
			getSiteData(){
				getSite({
					projectId: uni.getStorageSync('id')
				}).then(res => {
					if (res.code !== 1) {
						uni.showToast({
							title: "数据获取失败",
							icon: "none"
						})
						return
					}
					res.result.forEach((item, index) => {
						this.siteData[item.id] = item.name
					})
					this.$forceUpdate();
				})
				if (this.queryType === true) {
					this.queryType = false
				}
			},
			editSite() {
				let url = '/pages/project/pointMangement/details/editSite/editSite'
				this.$urlTo.togo(url,this.form)
				// console.log(this.form)
				
				// if (this.isEdit === true) {
				// 	this.isEdit = false
				// } else {
				// 	uni.showModal({
				// 		title: '提示',
				// 		content: '是否更新该点位',
				// 		success: (res) => {
				// 			if (res.confirm) {
				// 				delete this.form.id
				// 				putEditSite(this.id , this.form).then(res =>{
				// 					console.log(res)
				// 					uni.showToast({
				// 						title: res.msg,
				// 						icon: "none",
				// 						duration: 2000
				// 					})
				// 					if(res.code !== 1){
				// 						return
				// 					}
				// 					setTimeout(() => {
				// 						var item = true; //item为要传的值
				// 						var pages = getCurrentPages();
				// 						var prevPage = pages[pages.length - 2];
				// 						prevPage.delete = item;
				// 						uni.navigateBack()
				// 					}, 500)
									
				// 				})
				// 				// console.log(this.form)
								
				// 			} else if (res.cancel) {
				// 				uni.showToast({
				// 					title: "取消成功",
				// 					icon: "none"
				// 				})
				// 				return
				// 			}
				// 		}
				// 	});

				// 	this.isEdit = true
				// }
			},
			deleteSite() {
				uni.showModal({
					title: '删除',
					content: '是否永久删除？',
					success: (res) => {
						if (res.confirm) {
							deleteDeleteSite(this.id).then(res => {
								uni.showToast({
									title: res.msg,
									icon: "none",
									duration: 1000
								})
								if (res.code !== 1) {
									return
								}
								setTimeout(() => {
									var item = true; //item为要传的值
									var pages = getCurrentPages();
									var prevPage = pages[pages.length - 2];
									prevPage.delete = item;
									uni.navigateBack()
								}, 500)
							})
						} else if (res.cancel) {
							uni.showToast({
								title: "取消删除",
								icon: "none"
							})
							return
						}
					}
				});
			},
			getSiteInfo() {
				siteInfo(this.id).then(res => {
					console.log(res.result)
					if (res.code !== 1) {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
						return
					}
					this.form = res.result
					let pos = gpsToGcj(this.form.longitude , this.form.latitude)
					
					this.latitude = pos[1]
					this.longitude = pos[0]
					// this.latitude = this.form.latitude
					// this.longitude = this.form.longitude

					this.circles = [{ //在地图上显示圆
						latitude: this.latitude,
						longitude: this.longitude,
						fillColor: "#66666666", //填充颜色
						color: "#A7B6CB", //描边的颜色
						radius: this.form.scope, //半径
						strokeWidth: 2 //描边的宽度
					}]
					if(res.result.type === '1'){
						this.markers = [{
							id: 1,
							latitude: this.latitude,
							longitude: this.longitude,
							iconPath: '/static/positionGreen.png',
						}]
					} else if(res.result.type === '2'){
						this.markers = [{
							id: 1,
							latitude: this.latitude,
							longitude: this.longitude,
							iconPath: '/static/positionYellow.png',
						}]
					}
					// if (this.prevPage.delete === true){
					// 	this.prevPage.delete = false
					// }
					// this.getMap()
				})
			}
		}
	}
</script>

<style lang="scss">
	.navbar-right {
		padding: 0px 40rpx;
		color: #ffffff;
	}

	.details {
		min-height: 100vh;
		height: auto;
		background-color: white;
	}

	.textmain {
		background-color: white;
		padding: 0 30rpx;

		.u-row {
			height: 100rpx;

			.input {
				text-align: right;
			}
		}

		.btns {
			padding-top: 30rpx;
		}
	}
</style>
